<template>
	<mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" :up="upOption" @down="downCallback" @up="upCallback">
		<view class="head">
			<!--轮播图广告-->
			<adver advertype="mascot" :showadtitle="false"></adver>
			<!--公告-->
			<navigator url="/pages/article/index?key=hkdhshaDD" class="notice">
				<view class="notice-left">
					<image class="laba" src="../../static/image/laba.png" mode="aspectFill"></image>
					<view class="line"></view>
					<text class="small-text">晒单得现金红包，最高20元</text>
				</view>
				<image class="notice-right" src="../../static/image/jiantou2.png" mode="aspectFill"></image>
			</navigator>
		</view>
		<me-tabs v-model="tabIndex" :tabs="tabs" @change="tabChange" :height="100"></me-tabs>
		<view class="datainfo" v-for="(item,index) in listdata" :key="index">
			<image class="avatar" :src="item.avatar" mode="aspectFill"></image>
			<view class="squarecontent">
				<view class="wechat"> 
					<text class="blodfont">{{item.nickname}}</text>
					<view class="score">
						<image v-for="(starsitem,starsindex) in item.fraction" :key="starsindex" class="starts" src="/static/image/starts.png"
						 mode="aspectFill"></image>
					</view>
				</view>
				<view class="squareprize">
					<image class="prizeimage" :src="item.p_thumb" mode="aspectFill"></image>
					<text class="prizetiles">{{prizetitle[item.p_index]}}等奖：{{item.p_title}}</text>
				</view>
				<text class="describe">{{item.content}}</text>
				<!--图片组-->
				<view class="groupimg">
					<view class="groupimg-item" v-for="(itemimg,indeximg) in item.thumb" :key="indeximg">
						<image :src="itemimg" mode="aspectFill" @click="priview(indeximg,index)"></image>
					</view>
				</view>
				<!--时间-->
				<view class="timer">
					<text class="timer-item">{{item.add_time}}</text>
					<view class="ouqi" @click="fabulous(index)">
						<text :class="['ouqi-text',item.isfabulous?'colorfonts':'']">欧气值{{item.like}}</text>
						<image :class="['ouqi-img',item.isfabulous?'groade':'']" src="../../static/image/fish_icon.png" mode="aspectFill"></image>
					</view>
				</view>
			</view>
		</view>
	</mescroll-body>
</template>

<script>
	/**
	 * 朋友圈/锦鲤广场
	 */

	//获取全局数据
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				//下拉参数配置
				downOption: {
					use: false,
				},
				// //上拉参数配置
				upOption: {
					// page: {
					// 	size: 10 // 每页数据的数量
					// },
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						tip: '~ 搜索无数据 ~', // 提示
						btnText: ''
					},
					textLoading: "玩命加载中 ...",
					textNoMore: "-- 人家是有底线的 --",
				},
				prizetitle: ['一', '二', '三', '四', '五'],
				tabs: ['本周锦鲤', '历史锦鲤'],
				tabIndex: 0,
				listdata: [],
				routes: [
					'/index/mascot',
					'/index/historyMascot',
				], //路由地址
			}
		},

		onLoad() {
			//console.log(uni.getStorageSync('user_info'))
		},
		methods: {
			//点赞
			fabulous(index){
				//判断是否需要登陆
				if(this.$Logintip()){
					this.$Userlogin()
					return
				}
				if(!this.listdata[index].isfabulous){
					this.$HttRequest({
						url: '/index/mascotLike',
						param:{id:this.listdata[index].id}
					}).then((res) => {
						console.log(res);
						if (res.status === 10000) {
							this.listdata[index].isfabulous = true;
							this.listdata[index].like = res.data;
							this.$ShowMsg('点赞成功！')
						} else {
							this.$ShowMsg(res.message)
						}
					}).catch((error) => {
						//异常错误
						this.$ShowMsg('statusCode：' + error.errMsg);
					})
				}
			},
			
			upCallback(page) {
				console.log('upCallback');
				//出现分类不能直接复制
				this.getinitdata(page.num, this.routes[this.tabIndex]).then(res => {
					console.log(res);
					this.mescroll.endSuccess(res.length);
					//设置列表数据
					if (page.num == 1) this.listdata = []; //如果是第一页需手动制空列表
					this.listdata = this.listdata.concat(res); //追加新数据
				}).catch(error => {
					//联网失败, 结束加载
					this.mescroll.endErr();
					this.$ShowMsg(error);
				})

			},

			tabChange(e) {
				this.tabIndex = e;
				this.listdata = [] // 先置空列表,显示加载进度
				this.mescroll.resetUpScroll() // 再刷新列表数据
			},
			//图片预览
			priview(indeximg, index) {
				uni.showLoading({
					title: '图片载入中...',
					mask: true
				});
				uni.previewImage({
					indicator: "number",
					current: indeximg, //为当前显示图片的链接/索引值
					urls: this.listdata[index].thumb,
					//长按图片显示操作菜单，如不填默认为保存相册
					//    longPressActions: {
					//        itemList: ['发送给朋友', '保存图片', '收藏'],
					//        success: function(data) {
					// 	console.log(data);
					//            //console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					//        },
					//        fail: function(err) {
					//            console.log(err.errMsg);
					//        }
					//    }
					success(res) {
						console.log(res);
						uni.hideLoading();
					},
					fail(error) {
						console.log(error);
					}
				});
			},
			//获取列表数据
			getinitdata(pages, url) {
				return new Promise((resolve, reject) => {
					this.$HttRequest({
						url: url,
						param: {
							page: pages
						}
					}).then((res) => {
						console.log(res);
						if (res.status === 10000) {
							resolve(res.data.data);
						} else {
							this.$ShowMsg(res.message);
						}
					}).catch((error) => {
						//异常错误
						reject(error.errMsg);
					});
				});

			}
		}
	}
</script>

<style lang="scss">
	//朋友圈内容
	.squarecontent {
		flex: 1;
		justify-content: center;

		border-bottom-color: #f2f2f2;
		border-bottom-width: 1rpx;
		border-bottom-style: solid;
	}

	.groupimg {
		flex: 1;
		justify-content: flex-start;
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 20rpx;
	}

	.groupimg-item {
		margin: 10rpx 0;
		margin-right: 10rpx;
		width: 190rpx;
		height: 190rpx;
		background-color: #F0F0F0;

		image {
			width: 190rpx;
			height: 190rpx;
		}
	}

	.timer {
		flex: 1;
		justify-content: space-between;
		display: flex;

		margin-bottom: 20rpx;
	}

	.timer-item {
		font-size: 25rpx;
		color: #ababab;
	}

	.ouqi {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.ouqi-text {
		font-size: 25rpx;
		color: #ababab;
	}
	.colorfonts{
		color: #FF0000;
	}
	.ouqi-img {
		width: 28rpx;
		height: 28rpx;
		margin-left: 5rpx;
		filter: grayscale(1);
	}
	//关闭灰色滤镜
	.groade{
		filter: grayscale(0);
	}

	.describe {
		flex: 1;
		line-height: 25rpx;
		font-size: 28rpx;
	}

	.squareprize {
		flex: 1;
		background-color: #faf6ed;
		border-radius: 15rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 20rpx;
		margin-bottom: 15rpx;
	}

	.prizeimage {
		width: 120rpx;
		height: 80rpx;
		margin-right: 20rpx;
	}

	.prizetiles {
		font-size: 28rpx;
		font-weight: bold;
		color: #907840;
	}

	.score {

		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.starts {
		width: 20rpx;
		height: 20rpx;
	}

	.button {
		width: 120rpx;
		line-height: 75rpx;
		text-align: center;
		margin: 0 40rpx;
	}

	.blodfont {
		font-size: 28rpx;
		font-weight: bold;
	}

	.avatar {

		margin: 0 20rpx;
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-left: 0;
	}

	.wechat {
		flex: 1;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.datainfo {
		padding: 20rpx;
		display: flex;
		justify-content: center;
		align-items: flex-start;
	}

	.tarbar {
		flex: 1;
		flex-direction: row;
		height: 80rpx;
		border-bottom-width: 1rpx;
		border-bottom-color: #f2f2f2;
		border-bottom-style: solid;
		justify-content: flex-start;
		align-items: center;
	}

	.hover {
		border-bottom-width: 5rpx;
		border-bottom-color: $uni-botton-primary;
		border-bottom-style: solid;
	}

	.head {
		
		padding: 30rpx;
		padding-top: 0;
		border-bottom-width: 20rpx;
		border-bottom-color: #f0f0f0;
		border-bottom-style: solid;

	}

	
	.notice {
		flex: 1;
		margin-top: 30rpx;
		display: flex;

		justify-content: space-between;
		align-items: center;
	}

	.notice-left {
		display: flex;

		justify-content: center;
		align-items: center;
	}

	.line {
		height: 40rpx;
		width: 2rpx;
		background-color: #d8d8d8;
		margin: 0 20rpx;
	}

	.small-text {
		font-size: 28rpx;
	}

	.notice-right {
		width: 25rpx;
		height: 25rpx;
	}

	.laba {
		width: 35rpx;
		height: 35rpx;
	}
</style>
